  <template>
    <div class="login-box">
        <div class="box">
            <div class="tabs">
                <div class="tabs-items hui" :class="active==0?'tabs-active':''" @click="active = 0">
                    登陆
                </div>
                <div class="tabs-items hui" :class="active==1?'tabs-active':''" @click="active = 1">
                    注册
                </div>
            </div>
            <div class="content">
                <div class="login" v-show="active == 0">
                    <div>
                        <p class="title">手机号码</p>
                        <input class="input" placeholder="请输入手机号码" v-model="username" type="text">
                    </div>
                    <div>
                        <p class="title">密码</p>
                        <input class="input" placeholder="请输入密码" v-model="password" type="password">
                    </div>
                </div>
                <div class="register" v-show="active == 1">
                    <div>
                        <p class="title">手机号码</p>
                        <div class="input-box">
                            <input class="input getY" placeholder="请输入手机号码" v-model="username" type="text">
                            <div style="color:#BE2328;" @click="status==0||status==2?getY():false">{{status==0?'获取验证码':status==1?time+'后重发':'重新获取'}}</div>
                        </div>
                    </div>
                    <div>
                        <p class="title">验证码</p>
                        <input class="input" placeholder="请输入验证码" v-model="yanzheng" type="text">
                    </div>
                    <div>
                        <p class="title">密码</p>
                        <input class="input" placeholder="请输入密码" v-model="password" type="password">
                    </div>
                </div>
                <div class="bottom">
                    <p class="forget">
                        <a href="#/upl/forgetPassword">忘记密码</a>
                    </p>
                    <button @click="active==0?login():register()">{{active == 0? '登陆':'注册'}}</button>
                </div>
            </div>
        </div>
        <div>
            <p class="hui" style="text-align:center;margin-top:.24rem;font-size:.32rem">登陆或注册表示您同意
                <a class="art" href="">《阿特多多用户协议》</a>
            </p>
        </div>
        <div class="sanfang">
            <p class="hui">第三方登陆</p>
            <div class="sanffang-img">
                <div @click="$router.push('/upl/bindPhone')" style="width:23px;height:23px;margin:0 auto;border:solid 1px #888">

                </div>
                <!-- <img style="width:23px;height:23px" src="/static/1.png" alt=""> -->
            </div>
        </div>
    </div>
</template>
  <script>
import md5 from 'js-md5'
export default {
    name: '',
    data() {
        return {
            active: 0,
            username: '',
            password: '',
            yanzheng: '',
            text: '',
            time: 60,
            status: 0,
            getYanzheng: ''
        }
    },
    methods: {
        // 校验的方法 手机号 密码 验证码
        verify(username, password, yanzheng) {
            if (username) {
                var myreg = /^[1][3,4,5,7,8][0-9]{9}$/
                if (!myreg.test(this.username)) {
                    this.text = '请输入正确的手机号'
                    this.$toast({
                        message: this.text,
                        duration: 3000
                    })
                    return false
                }
            }
            if (password) {
                var myreg = /^[a-zA-Z][a-zA-Z0-9]{6,15}$/
                if (!myreg.test(this.password)) {
                    this.text = '密码必须为字母开头不含特殊字符大于7位'
                    this.$toast({
                        message: this.text,
                        duration: 3000
                    })
                    return false
                }
            }
            if (yanzheng) {
                if (this.yanzheng == 111111) {  
                } else {
                    var myreg = /^[0-9]{6}$/
                    if (
                        !myreg.test(this.yanzheng) &&
                        this.yanzheng !== this.getYanzheng
                    ) {
                        this.text = '请输入正确的6位验证码'
                        this.$toast({
                            message: this.text,
                            duration: 3000
                        })
                        return false
                    }
                }
            }
            return true
        },
        // 注册
        register() {
            // 校验手机号 密码 验证码
            if (!this.verify(true, true)) {
                return false
            }
            // 请求
            this.Apost(
                {
                    api_name: 'ateduoduo.user.signup',
                    mobile: this.username,
                    verify_code:this.yanzheng,
                    password: md5(this.password)
                },
                (err, res) => {
                    if (err) return false
                    this.$toast({
                        message: '注册成功',
                        duration: 1500
                    })
                    this.active = 0
                }
            )
        },
        // 登陆
        login() {
            if (!this.verify(true, true, true)) {
                return false
            }
             this.Apost(
                {
                    api_name: 'ateduoduo.user.login',
                    mobile: this.username,
                    password: md5(this.password)
                },
                (err, res) => {
                    if (err) return false
                    this.$toast({
                        message: '登陆成功',
                        duration: 1500
                    })
                    this.$router.push(`/pages`)
                    this.$store.state.user = res.data;
                    window.setLocal('ate_user',res.data)
                }
            )
        },
        // 获取验证码
        getY() {
            // 校验手机号
            if (!this.verify(true)) {
                return false
            }
            this.Apost(
                {
                    mobile: this.username,
                    api_name: 'ateduoduo.user.sendVerifyCode'
                },
                (err, res) => {
                    //  拿到验证码,开始重新发送的倒计时
                    if (err) {
                        this.status = 1
                        this.timeGo()
                        this.getYanzheng = res.data
                    }
                }
            )
        },
        timeGo() {
            var that = this
            var timeGo = setInterval(function() {
                that.time -= 1
                if (that.time == 0) {
                    that.status = 2
                    clearInterval(timeGo)
                    that.time = 60
                }
            }, 1000)
        }
    },
    watch: {
        active() {
            this.username = ''
            this.password = ''
            this.yanzheng = ''
        }
    },
    beforeDestroy() {}
}
</script>
  <style scoped>
.login-box {
    padding-top: 1.32rem;
}
.box {
    width: 6.54rem;
    /* margin-top: 1.32rem; */
    margin: 0 auto;
    border-radius: 4px;
    height: 8.52rem;
    border: 1px solid rgba(216, 216, 216, 1);
}
.tabs {
    height: 1.4rem;
    width: 100%;
    display: flex;
    justify-content: space-around;
    border-bottom: solid 1px rgba(216, 216, 216, 1);
}
.tabs-items {
    width: 1.28rem;
    font-size: 0.36rem;
    height: 100%;
    padding-top: 0.72rem;
    text-align: center;
}
.tabs-active {
    color: rgba(190, 35, 40, 1);
    border-bottom: solid 4px rgba(190, 35, 40, 1);
}
.content {
    padding: 0.24rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: calc(100% - 1.4rem);
}
.content .title {
    padding: 0.24rem 0;
}
.content .input {
    border: none;
    border-bottom: solid 1px rgba(216, 216, 216, 1);
    width: 100%;
    font-size: 0.32rem;
    padding: 0 0.06rem 0.24rem;
}
.content .bottom button {
    width: 100%;
    border: none;
    height: 0.96rem;
    background: none;
    background: rgba(51, 51, 51, 1);
    text-align: center;
    line-height: 0.96rem;
    color: #fff;
    font-size: 0.32rem;
    border-radius: 4px;
}
.forget {
    text-align: right;
    margin-bottom: 0.24rem;
}
.forget a {
    color: rgba(0, 0, 0, 0.54);
    text-decoration: none;
}
.art {
    color: #be2328;
}
.sanfang {
    margin-top: 0.8rem;
    text-align: center;
}
.sanffang-img {
    margin-top: 0.3rem;
}
.getY {
    border: none !important;
    width: calc(100% - 1.6rem) !important;
}
.input-box {
    border-bottom: solid 1px rgba(216, 216, 216, 1);
    display: flex;
    justify-content: space-between;
    /* align-items: center; */
    margin-bottom: 0.24rem;
}
</style>
